<template>
  <div id="app" class="app-page">
    <root name="WarePick">
      <safe-header
        v-bind="{
          title: '待复核波次列表',
          isBack: true,
          backIconColor: '#fff',
          fixedTop: true,
        }"
      />
      <div>
        <v-container>
          <v-row>
            <v-col :cols="12" class="pb-0">
              <!-- <v-autocomplete
              v-model="value"
              color="white"
              item-text="name"
              item-value="id"
              label="State"
              hide-details
              :items="states"
              :filter="customFilter"
              @change="chooseConditions"
              ></v-autocomplete>-->
              <v-text-field
                dense
                :prepend-inner-icon="mdiMagnify"
                v-model="serchData.waveCode"
                solo
                hide-details
                placeholder="请输入波次号进行查询"
                @input="chooseConditions"
                @keydown.13="taskCodeSearch"
                style="font-size: 14px"
              ></v-text-field>
            </v-col>
          </v-row>
        </v-container>
        <v-container width:80%>
          <v-card
            class="mx-auto my-2 list_card"
            max-width="374"
            v-for="item in waveMasterList"
            :key="item.code"
            outlined
            @click="waveMasterClick(item)"
            style="board: thin solid #cacbcc"
          >
            <v-card-title class="pb-3 card-title">
              <v-row>
                <v-col cols="10" class="py-0 d-flex align-center">{{ item.code }}</v-col>
                <v-col cols="2" class="py-0 d-flex align-center">
                  <v-icon color="#CACBCC" style="margin-left:30px">{{ svgpath }}</v-icon>
                </v-col>
                <!-- <v-col
                  class="text-right py-0 pr-0 d-flex align-center justify-end"
                >
                 </v-col
                >-->
              </v-row>
            </v-card-title>
            <v-divider class="my-0 card-sp-line"></v-divider>
            <v-card-text>
              <v-row class="d-flex flex-row justify-space-between">
                <v-col cols="3" class="py-1 card-lable">分配时间</v-col>
                <v-col class="ms-2 py-1 text-right card-value">{{ item.allotTime}}</v-col>
              </v-row>
              <v-row>
                <v-col cols="3" class="py-1" style="color: #999999">分配人</v-col>
                <v-col
                  class="ms-2 py-1 text-right"
                  style="font-size: 0.75rem; color: #666666"
                >{{ item.allotUserName }}</v-col>
              </v-row>
            </v-card-text>
          </v-card>
        </v-container>
      </div>
    </root>
  </div>
</template>

<script>
import SafeHeader from "../../components/safeHeader_wms";
// import Storage from "@/utils/storage.js";
import wms from "../../utils/http.js";
// import { apiList } from "@/static/apiList";
import { mdiChevronRight, mdiMagnify } from "@mdi/js";
import Root from "@/components/Root.vue";
// import qs from "qs";

export default {
  name: "WarePick",
  components: {
    SafeHeader,
    Root
  },
  data() {
    return {
      svgpath: mdiChevronRight,
      mdiMagnify: mdiMagnify,
      value: "",
      billNo: "",
      keyWords: "",
      infoList: [],
      waveMasterList: [],
      // 查询参数
      serchData: {
        wareId: localStorage.getItem("wareId"),
        waveCode: ""
      }
    };
  },
  computed: {},
  methods: {
    //搜索
    taskCodeSearch() {
      this.getWaveData();
    },
    getWaveData() {
      this.overlay = true;
      wms
        .get({
          url: "/pick/tasks/getBoxesForAll",
          data: this.serchData
        })
        .then(res => {
          this.overlay = false;
          if (res.status == 200 && res.data.code == 200) {
            if (res.data.data.total == 0) {
              this.$root.api.api.toast({ msg: "无数据", location: "middle" });
            }
            this.waveMasterList = res.data.data;
          } else {
            alert(res.data.message);
          }
        });
    },
    // 当前选中值发生变化时
    chooseConditions(text) {
      // 更改下方列表
      this.waveMasterList = this.waveMasterList.filter(item => {
        if (item.code.includes(text)) {
          return true;
        }
      });
    },
    // 获取列表
    getListData() {
      console.log(123);
    },
    waveMasterClick(item) {
      console.log(`----------------------------------------${item.code}`);
      if (window.navigator.userAgent.toLowerCase().includes("apicloud")) {
        window.api.openWin({
          name: "OutboundReview2",
          url: "./OutboundReview2.html",
          pageParam: {
            waveCode: item.code
          }
        });
      } else {
        this.$root.api.api.openWin({
          name: "OutboundReview2",
          url: "./OutboundReview2.html",
          pageParam: {
            waveCode: item.code
          }
        });
      }
    }
  },
  mounted() {
    this.getWaveData();
  }
};
</script>

<style lang="scss" scoped>
.v-btn:not(.v-btn--round).v-size--default {
  padding: 0 !important;
}
::v-deep .v-application--is-ltr .ms-2 {
  // margin-left: 1px !important;
}
.col-xl,
.col-xl-auto,
.col-xl-12,
.col-xl-11,
.col-xl-10,
.col-xl-9,
.col-xl-8,
.col-xl-7,
.col-xl-6,
.col-xl-5,
.col-xl-4,
.col-xl-3,
.col-xl-2,
.col-xl-1,
.col-lg,
.col-lg-auto,
.col-lg-12,
.col-lg-11,
.col-lg-10,
.col-lg-9,
.col-lg-8,
.col-lg-7,
.col-lg-6,
.col-lg-5,
.col-lg-4,
.col-lg-3,
.col-lg-2,
.col-lg-1,
.col-md,
.col-md-auto,
.col-md-12,
.col-md-11,
.col-md-10,
.col-md-9,
.col-md-8,
.col-md-7,
.col-md-6,
.col-md-5,
.col-md-4,
.col-md-3,
.col-md-2,
.col-md-1,
.col-sm,
.col-sm-auto,
.col-sm-12,
.col-sm-11,
.col-sm-10,
.col-sm-9,
.col-sm-8,
.col-sm-7,
.col-sm-6,
.col-sm-5,
.col-sm-4,
.col-sm-3,
.col-sm-2,
.col-sm-1,
.col,
.col-auto,
.col-12,
.col-11,
.col-10,
.col-9,
.col-8,
.col-7,
.col-6,
.col-5,
.col-4,
.col-3,
.col-2,
.col-1 {
  padding: 7px;
}
</style>
